<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="body">
			<view class="body-cen">
				<view class="one flex-row">
					<view>联系人</view>
					<view>
						<input v-model="form.contact_name" placeholder="请输入联系姓名" placeholder-class="input-p"/>
					</view>
				</view>
				<view class="one flex-row">
					<view>手机号</view>
					<view>
						<input v-model="form.contact_mobile" placeholder="请输入联系手机号码" placeholder-class="input-p"/>
					</view>
				</view>
				<view class="flex-row flex-content-between flex-item-center ones">
					<view class="flex-row onet">
						<view>收货地址</view>
						<view>
							<picker mode="multiSelector" range-key="name" @columnchange="changeCounm" @change="bindPickerChange" :value="index" :range="array">
													<view class="uni-input">{{showTxt}}</view>
												</picker>
							</view>
					</view>
					<image class="xuanz" src="../../static/index/you.png" mode="scaleToFill"></image>
				</view>
				<view class="one-address flex-row">
					<view>详细地址</view>
					<view><textarea class="txtarea" placeholder="请输入详细地址" maxlength="140" v-model="form.address"></textarea></view>
				</view>
				<view class="flex-row flex-content-between settop">
					<view class="setdefault">设置为默认地址</view>
					<view>
						<switch class="sf" v-if="form.is_default==1" :checked="true" @change="setSwitch" :color="switchColor"/>
						<switch class="sf" v-if="form.is_default==0" @change="setSwitch" :color="switchColor"/>
					</view>
				</view>
				<view class="flex-row flex-content-center baocun">
					<view @tap="baocun">保存收货地址</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				array:[
					
				],
				switchColor:"#50BC16",
				showTxt:"请选择地址",
				index:[0,0,0],
				form:{
					contact_name:"",
					contact_mobile:"",
					province:"",
					city:"",
					area:"",
					address:"",
					is_default:0,
					id:"",
				}
			}
		},
		onLoad(opt) {
			if(opt.title){
				uni.setNavigationBarTitle({
					title:opt.title
				})
			}
			if(opt.id){
				this.form.id = opt.id;
				this.getCity(opt.id)
			}else{
				this.getCity();
			}
		},
		methods:{
			baocun(){
				let that = this;
				let form = this.form;
				if(!form.contact_name){
					this.$utils.showMessage("请输入联系人");
					return
				}
				if(!form.contact_mobile){
					this.$utils.showMessage("请输入手机号码");
					return
				}
				if(!form.address){
					this.$utils.showMessage("请输入详细地址");
					return
				}
				if(!form.province_id||!form.city_id||!form.area_id){
					this.$utils.showMessage("选择省市区");
					return
				}
				this.$api.changeAddress(form).then(res=>{
					that.$store.dispatch("getUserAddress");
					if(form.id){
						that.$utils.showMessage("修改成功",()=>{
							uni.navigateBack();
						})
					}else{
						that.$utils.showMessage("添加成功",()=>{
							uni.navigateBack();
						})
					}
				})
			},
			//获取城市
			getCity(id){
				let that = this;
				this.$api.getCitys().then(res=>{
					// console.log(res);
					let index = that.index;
					let array = [];
					array.push(res);
					array.push(res[index[0]].child);
					array.push(res[index[0]].child[index[1]].child);
					that.array = array;
					if(id){
						that.getAddressInfo(id);
					}
				})
			},
			//获取用户的地址
			getAddressInfo(id){
				let that = this
				this.$api.getAddressInfo({
					address_id:id
				}).then(res=>{
					// console.log(res);
					that.form = res;
					that.showTxt = res.province.name+"-"+res.city.name+"-"+res.area.name
				})
			},
			//设置开关
			setSwitch(e){
				console.log(e);
				var value = e.detail.value;
				if(value){
					this.form.is_default = 1
				}else{
					this.form.is_default = 0
				}
			},
			changeCounm(e){
				// console.log(e);
				let index = this.index;
				let column = e.detail.column
				let value = e.detail.value;
				if(column==0){
					index[0] = value
					index[1] = 0;
					index[2] = 0
				}else if(column==1){
					index[1] = value;
					index[2] = 0
				}else{
					index[2] = value;
				}
				this.index = index;
				this.changeCityName();
			},
			//修改名称
			changeCityName(has_txt){
				let index = JSON.parse(JSON.stringify(this.index));
				let newarray = [];
				let arrays = this.array;
				// console.log(arrays);
				// console.log(index);
				newarray.push(arrays[0]);
				newarray.push(arrays[0][index[0]].child)
				newarray.push(arrays[0][index[0]].child[index[1]].child)
				// console.log(newarray);
				this.array = newarray;
				if(has_txt){
					this.showTxt = newarray[index[0]].name+"-"+newarray[index[0]].child[index[1]].name+"-"+newarray[index[0]].child[index[1]].child[index[2]].name
				}
			},
			bindPickerChange(e){
				
				let index = e.detail.value;
				
				let newarray = this.array[0];
				this.showTxt = newarray[index[0]].name+"-"+newarray[index[0]].child[index[1]].name+"-"+newarray[index[0]].child[index[1]].child[index[2]].name
				this.index = index;
				this.form.province_id = newarray[index[0]].id;
				this.form.city_id = newarray[index[0]].child[index[1]].id;
				this.form.area_id = newarray[index[0]].child[index[1]].child[index[1]].id;
			}
		}
	}
</script>

<style lang="scss">
	.input-p{
		color: #666666;
	}
	.baocun{
		>view{
			margin-top: 115rpx;
			width: 400rpx;
			height: 90rpx;
			background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}
	}
	.sf{
		transform:scale(0.7)
	}
	.settop{
		margin-top: 20rpx;
	}
	.setdefault{
		margin-top: 13rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.txtarea{
		width: 400rpx;
		height: 100rpx;
	}
	.onet{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 170rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			// margin-left: ;
		}
	}
	.one-address{
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 40rpx;
		margin-top: 40rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 170rpx;
		}
		>view:nth-child(2){
			width: 400rpx;
		}
	}
	.xuanz{
		width: 14rpx;
		height: 24rpx;
	}
	.one{
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 40rpx;
		margin-top: 40rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 170rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			// margin-left: ;
		}
	}
	.ones{
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 40rpx;
		margin-top: 40rpx;
	}
	.body-cen{
		margin-left: 50rpx;
		margin-right: 50rpx;
		padding-top: 40rpx;
		>view:nth-child(1){
			margin-top: 0rpx;
		}
	}
	.body{
		width: 750rpx;
		height: 100vh;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
	}
</style>